<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Meteora.Treeview</title>

    <!-- Meteora -->
    <script src="../../src/meteora.js" type="text/javascript"></script>
    <!-- Meteora -->

    <link type="text/css" rel="stylesheet" href="../css/test.css" />
  </head>
  <body>
    <h1>Meteora.Treeview</h1>

    <div class="instructions">
      This control should show a treeview with the <i style="color: #06c">giskard.example.org/test 2</i>
      node selected by default.
    </div>

    <h3>Treeview test</h3>
    <div id="treeview-1"></div>

    <script type="text/javascript">

      Meteora.uses('Meteora.Treeview');

      Meteora.onStart(
        function () {

          new Treeview(
            'treeview-1',
            [
              {
                'label': 'giskard.example.org',
                'items': [
                  {
                    'label': 'item 1 (select event)',
                    'onSelect': function() { alert('Triggered onSelect event') }
                  },
                  {
                    'label': 'item 2'
                  },
                  {
                    'label': 'item 3'
                  },
                  {
                    'label': 'item 4'
                  },
                  {
                    'label': 'item 5'
                  }
                ]
              },
              {
                'label': 'daneel.example.org',
                'items': [
                  {
                    'label': 'item 1'
                  },
                  {
                    'label': 'item 2',
                    'onSelect': function() { alert('Triggered onSelect event') }
                  },
                  {
                    'label': 'item 3'
                  },
                  {
                    'label': 'item 4'
                  },
                  {
                    'label': 'item 5'
                  }
                ]
              },
              {
                'label': 'ajax.example.org',
                'items': '../media/treeview.json'
              }
            ],
            {
              'selected': [ 'giskard.example.org', 'item 2']
            }
          );
        }
      );
    </script>
    
  </body>
</html>
